<template>
  <div>
    <top-nav></top-nav>
    <div class="app-main">
      <div class="body">
        <el-card class="box-card card">
          <div class="user-bio">
            <div class="user-bio-section">
              <div class="user-bio-section-header">
                <h2>订单详情</h2>
              </div>
              <div class="user-bio-section-body">
                <ul class="list-inline">
                  <li class="title">
                    <span class="title"> 订单编号 </span>
                  </li>
                  <li>
                    <span class="content"> {{order.order_num}} </span>
                  </li>
                </ul>
                <ul class="list-inline">
                  <li class="title">
                    <span class="title"> 商品名称 </span>
                  </li>
                  <li>
                    <span class="content"> {{order.shop_name}} </span>
                  </li>
                </ul>
                <ul class="list-inline">
                  <li class="title">
                    <span class="title"> 原价 </span>
                  </li>
                  <li>
                    <span class="content"> ￥{{order.original_price}} </span>
                  </li>
                </ul>
                <ul class="list-inline" style="display: none">
                  <li class="title">
                    <span class="title"> 优惠价 </span>
                  </li>
                  <li>
                    <span class="content"> ￥{{order.discount_price||0}} </span>
                  </li>
                </ul>
                <ul class="list-inline">
                  <li class="title">
                    <span class="title"> 应付金额 </span>
                  </li>
                  <li>
                    <span class="content"> ￥{{order.discount_price||order.original_price}} </span>
                  </li>
                </ul>
                <ul class="list-inline">
                  <li class="title">
                    <span class="title"> 创建时间 </span>
                  </li>
                  <li>
                    <span class="content"> {{order.order_time}} </span>
                  </li>
                </ul>

                <ul class="list-inline">
                  <li class="title">
                    <span class="title"> 状态 </span>
                  </li>
                  <li>
                    <el-tag :type="order.status==2?'success':'warning'">
						{{order.status==1?'待付款':order.status==2?'已付款':'已取消'}}
					</el-tag>
                  </li>
                </ul>
                <ul class="list-inline" style="">
                  <li class="title">
                    <span class="title"> 可用优惠券 </span>
                  </li>
                  <li>
                    <el-select v-model="couponValue" placeholder="请选择">
                      <el-option
                        v-for="item in listCoupon"
                        :key="item.id"
                        :label="item.coupon_name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </li>
                </ul>

                <ul class="list-inline">
                  <li class="title">
                    <span class="title"> 请选择支付方式 </span>
                  </li>
                  <li>
                    <el-radio
                      v-model="wechatChecked"
                      label="1"
                      border
                      size="medium"
                      >微信支付</el-radio
                    >
                  </li>
                </ul>
              </div>
              <div style="margin: 20px" v-if="order.status==1">
                <el-button type="primary" @click="pay">
                  <i class="el-icon-bank-card"></i><span>支付</span>
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
	<el-dialog title="支付" :visible.sync="dialogTableVisible" width="50%" @close="closeQr">
		
		<div class="emqrcode">
			<div id="qrcode" ref="qrcode"></div>
		</div>
	</el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
	  name: "order-detail",
	  components: { QRCode },
  	data: () => ({
		order: {},
		setTime:false,
		dialogTableVisible:false,
		listCoupon: [
			{ id: 1, name: "100元优惠券" },
			{ id: 2, name: "50元优惠券" },
			{ id: 3, name: "20元优惠券" },
		],
    	couponValue: "",
    	wechatChecked: '1',
	}),
	created(){
		this.getOrder(false)
		this.getCoupon()
	},
	methods:{
		qrcode(qWidth, qHeight, qText, qRender) {
			this.$refs.qrcode.innerHTML = "";
			let qrcode = new QRCode("qrcode", {
				width: qWidth,
				height: qHeight,
				text: qText,
				render: qRender
			});
		},
		closeQr(){
			console.log('关闭')
			this.setTime = false
		},
		async getOrder(){
			let{data:{code,data}} = await this.$http.post(this.$api.orderInfo,{
					order_num:this.$route.query.order_num
			})
			if (code == 200) {
				this.order=data
				console.log('关闭-----',this.setTime)
				if (!this.setTime) {
					return false
				}
				
				if (data.status !=1 ) {
					this.$router.push({
						path:'/order/list',
						query:{order_num:data}
					})
				}else{
					setTimeout(()=>{
						this.getOrder()
					},2000)
				}
				
			}
		},
    	async getCoupon(){
      		let{data:{code,data}} = await this.$http.post(this.$api.myCouponList,{})
			if (code == 200) {
				this.listCoupon=data
			}
    	},
		async pay(){
			// let fromData = new FormData()
			// fromData.append('order_id',this.$route.query.order_num)
			// fromData.append('coupon_id',this.couponValue)
      		let{data:{code,data}} = await this.$http.post(this.$api.navicatPay,{
				  order_id:this.$route.query.order_num,
				  coupon_id:this.couponValue
			  });
			if (code==200) {
				this.dialogTableVisible = true
				this.$nextTick(function() {
					this.qrcode(124, 124,data, "canvas");
				});
				this.setTime = true
				this.getOrder()
			}
		}
	}
	
};
</script>

<style lang="scss" scoped>
.app-main {
  min-height: calc(100vh - 50px);
  position: relative;
  overflow: hidden;
  .body {
    width: 80%;
    margin: 20px auto 30px;
    .user-bio {
      margin-top: 0;
      color: #606266;
      .user-bio-section {
        font-size: 14px;
        padding: 1px 0;
        .user-bio-section-header {
          padding: 10px;
          border-bottom: 1px solid #dfe6ec;
          padding-bottom: 1px;
          margin-bottom: 10px;
          font-weight: 700;
          & h2 {
            display: block;
            font-size: 1.5em;
            margin-block-start: 0.83em;
            margin-block-end: 0.83em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
          }
        }
        .user-bio-section-body {
          padding-bottom: 1px;
          margin-left: 10px;
          margin-bottom: 10px;
        }
        .list-inline {
          padding-left: 0;
          margin-left: -5px;
          list-style: none;
          height: 40px;
          margin: 1em 0;
          & li {
            display: inline-block;
            padding-right: 5px;
            padding-left: 5px;
            font-size: 13px;
            &.title {
              width: 130px;
              font-size: 15px;
              color: #828282;
              line-height: 40px;
            }
            & span.content {
              font-size: 15px;
              color: #1c1c1c;
            }
          }
        }
      }
    }
  }
}
.emqrcode{
	margin: 0 auto;
	width: 124px;
}
</style>
